<template>
<div class="app-container">
	<el-form :model="form" :rules="rules"
    class="form"
    label-width="100px" ref="userForm">
    <input type="hidden" v-model="form.id"/>

    <el-form-item label="修改密码" prop="password">
      <el-col :span="5">
        <el-input
          :type="passwordType"
          v-model="form.password"
          name="password"
          placeholder="密码"
        >
          <span class="svg-container" slot="prefix"><svg-icon icon-class="password" /></span>
        </el-input>
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye" />
        </span>
      </el-col>
    </el-form-item>

    <el-form-item label="" prop="password2">
      <el-col :span="5">
        <el-input
          :type="passwordType"
          v-model="form.password2"
          placeholder="重复密码"
          name="password2"
        >
          <span class="svg-container" slot="prefix"><svg-icon icon-class="password" /></span>
        </el-input>
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye" />
        </span>
      </el-col>
    </el-form-item>

		<el-form-item>
			<el-button type="primary" @click="onSubmit" size="medium">保存</el-button>
			<el-button @click="onCancel" size="medium">取消</el-button>
		</el-form-item>
	</el-form>

</div>
</template>

<script>
import { changePassword } from '@/api/login';

export default {
  data() {
    const rules = {
      password: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能少于6个字符'))
        } else {
          callback()
        }
      },

      password2: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能少于6个字符'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
    }

    return {
      passwordType: 'password',
      form: {
        password: '',
        password2: ''
      },
      rules: {
        password: [{required: true, trigger: 'blur', message: '请输入密码'}, {validator: rules.password}],
        password2: [{ required: true, trigger: 'blur', message: '请输入密码'}, {validator: rules.password2}],
      }
    };
  },

  created() {
  },

  methods: {
    onSubmit() {
      this.$refs['userForm'].validate((valid) => {
        if (!valid) return false;

        changePassword(this.form.password).then(response => {
          if (response.data.code != 200) {
            this.$notify({
              title: '保存失败！',
              message: response.data.message,
              type: 'error'
            });
          } else {
            this.$notify({
              title: '成功',
              message: '保存成功！',
              type: 'success'
            });
          }
        });
      });
    },

    onCancel() {
      this.$confirm('确认不保存？').then(_ => {
        this.$store.dispatch('delVisitedViews', this.$route)
        this.$router.go(-1)
      });
    },

    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        location.reload();
      })
    },

    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$dark_gray:#889aa4;
.form .el-col {
  position: relative;
}

.svg-container {
  color: $dark_gray;
  vertical-align: middle;
  width: 25px;
  display: inline-block;
}

.show-pwd {
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
</style>
